<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='../css/fyz.public.style.css' />
<script type='text/javascript' src='../js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
/*leftRightTabChangeBut star*/
div.leftRightTabChangeBut{width:150px; margin:30px auto 15px; overflow:hidden; text-align:center;}
div.leftRightTabChangeBut a{display:block; width:45px; height:79px; line-height:79px; font-size:60px; font-weight:bold;  background:#ddd; color:#fff;}
div.leftRightTabChangeBut a.leftRightTabChangeLeft{float:left;}
div.leftRightTabChangeBut a.leftRightTabChangeRight{float:right; }
/*leftRightTabChangeListBut start*/
div.leftRightTabChangeListBut{width:600px; height:50px; margin:0px auto; padding-left:100px; }
div.leftRightTabChangeListBut a{width:60px; height:50px; line-height:50px; float:left; display:block; text-align:center; margin-right:13px; }
/*leftRightTabChange start*/
div.leftRightTabChange{width:500px; overflow:hidden; height:200px; margin:20px auto; position:relative;}
ul.leftRightTabChange{width:100%; overflow:hidden; position:absolute; top:0px; left:0px;}
ul.leftRightTabChange li.con{width:500px; height:200px; }
</style>
<div class="leftRightTabChangeBut">
    <a href="javascript:;" class='leftRightTabChangeLeft'>&lt;</a>
    <a href="javascript:;" class='leftRightTabChangeRight'>&gt;</a>
</div>
<div class='leftRightTabChangeListBut'>
	<a href="javascript:;" class='con' style="background:red;"></a>
	<a href="javascript:;" class='con' style="background:orange;"></a>
	<a href="javascript:;" class='con' style="background:yellow;"></a>
	<a href="javascript:;" class='con' style="background:green;"></a>
	<a href="javascript:;" class='con' style="background:cyan;"></a>
	<a href="javascript:;" class='con' style="background:blue;"></a>
	<a href="javascript:;" class='con' style="background:purple;"></a>
</div>
<div class="leftRightTabChange">
    <ul class="leftRightTabChange">
        <li class='con' style="background:red;"></li>
        <li class='con' style="background:orange;"></li>
        <li class='con' style="background:yellow;"></li>
		<li class='con' style="background:green;"></li>
        <li class='con' style="background:cyan;"></li>
        <li class='con' style="background:blue;"></li>
        <li class='con' style="background:purple;"></li>
    </ul>
</div>
<script type="text/javascript">
(function($){
    $.fn.extend({
        'leftRightTabChange':function(options){
			var opts = $.extend({},leftRightTabChange_defaluts,options);
			var $this  = $(this);
			var $thisAll = $this.find('*');
			var $leftRightTabChangeListBut = $(opts.leftRightTabChangeListBut);
			var $leftRightTabChangeListButAll = $(opts.leftRightTabChangeListBut).find('*');
			var $leftRightTabChangeLeft = $(opts.leftBut);
			var $leftRightTabChangeRight = $(opts.rightBut);
			opts.liSize = $this.find('li.con').size();
			opts.liWidth = $this.find('li.con').outerWidth(true);
			opts.liHeight = $this.find('li.con').outerHeight(true);
			opts.rightOneDate = new Date();
			opts.leftOneDate = new Date();
			if(opts.leftRightChange){
				$this.css('width','1000%');
				$this.find('li.con').css('float','left');
			};
			$(opts.rightBut).live('click',function(){
				opts.rightOneTime = new Date();
				opts.rightBetweenTime = opts.rightOneTime - opts.rightOneDate;
				if(opts.setClickBetweenTime){
					if(opts.rightBetweenTime >= opts.clickBetweenTime){
						indexAdd();
					};
				}else{
					if(opts.rightBetweenTime >= opts.animateTime){
						indexAdd();
					};
				};
				opts.rightOneDate = opts.rightOneTime;
			});
			$(opts.leftBut).live('click',function(){
				opts.leftoneTime = new Date();
				opts.leftBetweenTime = opts.leftoneTime - opts.leftOneDate;
				if(opts.setClickBetweenTime){
					if(opts.leftBetweenTime >= opts.clickBetweenTime){
						opts.liIndex --;
						if(opts.liIndex == -1){opts.liIndex = opts.liSize-1};
						comPart(opts.liIndex);
					};
				}else{
					if(opts.leftBetweenTime >= opts.animateTime){
						opts.liIndex --;
						if(opts.liIndex == -1){opts.liIndex = opts.liSize-1};
						comPart(opts.liIndex);
					};
				};
				opts.leftOneDate = opts.leftoneTime;
			});
			$(opts.leftRightTabChangeListBut).find('a.con').live('click',function(){
				opts.liIndex = $(this).index();
				comPart(opts.liIndex);
			});
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){
						indexAdd();
					},opts.setIntervalTime);
				};
				autoPlay();
				function clearIntervalFun(clearIntervalObj){
					$(clearIntervalObj).mouseover(function(){clearInterval(opts.timer);});
					$(clearIntervalObj).mouseout(function(){autoPlay();});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
				clearIntervalFun($leftRightTabChangeListBut);
				clearIntervalFun($leftRightTabChangeListButAll);
				clearIntervalFun($leftRightTabChangeLeft);
				clearIntervalFun($leftRightTabChangeRight);
			};
			function indexAdd(){
				opts.liIndex ++;
				opts.onClickRightFunction();
				opts.liIndex = opts.liIndex%opts.liSize;
				comPart(opts.liIndex);
			};			
			function comPart(){
				opts.onClickLeftFunction();
				if(opts.leftRightChange){
					opts.liLeft = '-' + opts.liIndex * opts.liWidth;
					$this.stop(true).animate({'left':opts.liLeft},opts.animateTime);
				}else{
					opts.liTop = '-' + opts.liIndex * opts.liHeight;
					$this.stop(true).animate({'top':opts.liTop},opts.animateTime);
				};
			};
		}
    });
	var leftRightTabChange_defaluts = {
		liSize:'',
		liWidth:'',
		liIndex:'',
		liLeft:'',
		liTop:'',
		liHeight:'',
		leftRightChange:true,
		timer:null,
		autoplay:true,
		animateTime:1000,
		setIntervalTime:2000,
		rightOneDate:0,
		rightOneTime:0,
		rightBetweenTime:0,
		setClickBetweenTime:true,
		clickBetweenTime:'800',
		leftOneDate:0,
		leftOneTime:0,
		leftBetweenTime:0,
		leftRightTabChangeListBut:'',
		leftBut:'',
		rightBut:'',
		onClickRightFunction:function(){},
		onClickLeftFunction:function(){}
	};
}(window.jQuery));
</script>
<script type="text/javascript">
$('ul.leftRightTabChange').leftRightTabChange({
	autoPlay:true,
	leftRightChange:false,//默认true为左右切换，false为上下切换
    animateTime:500,
    setIntervalTime:2000,
	setClickBetweenTime:false,//是否设置点击时间间隔
	clickBetweenTime:'800',//设置点击时间间隔 只有当setClickBetweenTime:true时才有效
	leftRightTabChangeListBut:'div.leftRightTabChangeListBut',
    leftBut:'a.leftRightTabChangeLeft',
    rightBut:'a.leftRightTabChangeRight',
	onClickRightFunction:function(){},
	onClickLeftFunction:function(){}
});
</script>
</body>
</html>